extends ../_bootstrap
append styles
	// Bootstrap theme
	+bootswatch("cerulean")
	// Custom styles for this template
	link(href='../css/theme.css', rel='stylesheet')
block body
	// Fixed navbar
	nav.navbar.navbar-default.navbar-fixed-top
		.container
			.navbar-header
				button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
					span.sr-only Toggle navigation
					span.icon-bar
					span.icon-bar
					span.icon-bar
				a.navbar-brand(href='#') Bootswatch theme
			#navbar.navbar-collapse.collapse
				ul.nav.navbar-nav
					li.active
						a(href='#') Home
					li
						a(href='#about') About
					li
						a(href='#contact') Contact
					li.dropdown
						a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false')
							| Dropdown 
							span.caret
						ul.dropdown-menu(role='menu')
							li
								a(href='#') Action
							li
								a(href='#') Another action
							li
								a(href='#') Something else here
							li.divider
							li.dropdown-header Nav header
							li
								a(href='#') Separated link
							li
								a(href='#') One more separated link
		
	.container.theme-showcase(role='main')
		// Main jumbotron for a primary marketing message or call to action
		.jumbotron
			h1 Bootswatch Themes example
			p
				| This is a template showcasing the various themes included in Bootswatch. Use it as a starting point to create something more unique by building on or modifying it.
		.page-header
			h1 Buttons
		p
			button.btn.btn-lg.btn-default(type='button') Default
			button.btn.btn-lg.btn-primary(type='button') Primary
			button.btn.btn-lg.btn-success(type='button') Success
			button.btn.btn-lg.btn-info(type='button') Info
			button.btn.btn-lg.btn-warning(type='button') Warning
			button.btn.btn-lg.btn-danger(type='button') Danger
			button.btn.btn-lg.btn-link(type='button') Link
		p
			button.btn.btn-default(type='button') Default
			button.btn.btn-primary(type='button') Primary
			button.btn.btn-success(type='button') Success
			button.btn.btn-info(type='button') Info
			button.btn.btn-warning(type='button') Warning
			button.btn.btn-danger(type='button') Danger
			button.btn.btn-link(type='button') Link
		p
			button.btn.btn-sm.btn-default(type='button') Default
			button.btn.btn-sm.btn-primary(type='button') Primary
			button.btn.btn-sm.btn-success(type='button') Success
			button.btn.btn-sm.btn-info(type='button') Info
			button.btn.btn-sm.btn-warning(type='button') Warning
			button.btn.btn-sm.btn-danger(type='button') Danger
			button.btn.btn-sm.btn-link(type='button') Link
		p
			button.btn.btn-xs.btn-default(type='button') Default
			button.btn.btn-xs.btn-primary(type='button') Primary
			button.btn.btn-xs.btn-success(type='button') Success
			button.btn.btn-xs.btn-info(type='button') Info
			button.btn.btn-xs.btn-warning(type='button') Warning
			button.btn.btn-xs.btn-danger(type='button') Danger
			button.btn.btn-xs.btn-link(type='button') Link
		.page-header
			h1 Tables
		.row
			.col-md-6
				+table(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])
			.col-md-6
				+table-striped(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])
		.row
			.col-md-6
				+table-bordered(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])
			.col-md-6
				+table-condensed(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])
		.page-header
			h1 Thumbnails
		img.img-thumbnail(src='../images/thumb.jpg', alt='A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera')
		.page-header
			h1 Labels
		h1
			span.label.label-default Default
			span.label.label-primary Primary
			span.label.label-success Success
			span.label.label-info Info
			span.label.label-warning Warning
			span.label.label-danger Danger
		h2
			span.label.label-default Default
			span.label.label-primary Primary
			span.label.label-success Success
			span.label.label-info Info
			span.label.label-warning Warning
			span.label.label-danger Danger
		h3
			span.label.label-default Default
			span.label.label-primary Primary
			span.label.label-success Success
			span.label.label-info Info
			span.label.label-warning Warning
			span.label.label-danger Danger
		h4
			span.label.label-default Default
			span.label.label-primary Primary
			span.label.label-success Success
			span.label.label-info Info
			span.label.label-warning Warning
			span.label.label-danger Danger
		h5
			span.label.label-default Default
			span.label.label-primary Primary
			span.label.label-success Success
			span.label.label-info Info
			span.label.label-warning Warning
			span.label.label-danger Danger
		h6
			span.label.label-default Default
			span.label.label-primary Primary
			span.label.label-success Success
			span.label.label-info Info
			span.label.label-warning Warning
			span.label.label-danger Danger
		p
			span.label.label-default Default
			span.label.label-primary Primary
			span.label.label-success Success
			span.label.label-info Info
			span.label.label-warning Warning
			span.label.label-danger Danger
		.page-header
			h1 Badges
		p
			a(href='#')
				| Inbox 
				span.badge 42
		ul.nav.nav-pills(role='tablist')
			li.active(role='presentation')
				a(href='#')
					| Home 
					span.badge 42
			li(role='presentation')
				a(href='#') Profile
			li(role='presentation')
				a(href='#')
					| Messages 
					span.badge 3
		.page-header
			h1 Dropdown menus
		.dropdown.theme-dropdown.clearfix
			a#dropdownMenu1.sr-only.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false')
				| Dropdown 
				span.caret
			ul.dropdown-menu(role='menu', aria-labelledby='dropdownMenu1')
				li.active(role='presentation')
					a(role='menuitem', tabindex='-1', href='#') Action
				li(role='presentation')
					a(role='menuitem', tabindex='-1', href='#') Another action
				li(role='presentation')
					a(role='menuitem', tabindex='-1', href='#') Something else here
				li.divider(role='presentation')
				li(role='presentation')
					a(role='menuitem', tabindex='-1', href='#') Separated link
		.page-header
			h1 Navs
		ul.nav.nav-tabs(role='tablist')
			li.active(role='presentation')
				a(href='#') Home
			li(role='presentation')
				a(href='#') Profile
			li(role='presentation')
				a(href='#') Messages
		ul.nav.nav-pills(role='tablist')
			li.active(role='presentation')
				a(href='#') Home
			li(role='presentation')
				a(href='#') Profile
			li(role='presentation')
				a(href='#') Messages
		.page-header
			h1 Navbars
		nav.navbar.navbar-default
			.container
				.navbar-header
					button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='.navbar-collapse')
						span.sr-only Toggle navigation
						span.icon-bar
						span.icon-bar
						span.icon-bar
					a.navbar-brand(href='#') Project name
				.navbar-collapse.collapse
					ul.nav.navbar-nav
						li.active
							a(href='#') Home
						li
							a(href='#about') About
						li
							a(href='#contact') Contact
						li.dropdown
							a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false')
								| Dropdown 
								span.caret
							ul.dropdown-menu(role='menu')
								li
									a(href='#') Action
								li
									a(href='#') Another action
								li
									a(href='#') Something else here
								li.divider
								li.dropdown-header Nav header
								li
									a(href='#') Separated link
								li
									a(href='#') One more separated link

		nav.navbar.navbar-inverse
			.container
				.navbar-header
					button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='.navbar-collapse')
						span.sr-only Toggle navigation
						span.icon-bar
						span.icon-bar
						span.icon-bar
					a.navbar-brand(href='#') Project name
				.navbar-collapse.collapse
					ul.nav.navbar-nav
						li.active
							a(href='#') Home
						li
							a(href='#about') About
						li
							a(href='#contact') Contact
						li.dropdown
							a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false')
								| Dropdown 
								span.caret
							ul.dropdown-menu(role='menu')
								li
									a(href='#') Action
								li
									a(href='#') Another action
								li
									a(href='#') Something else here
								li.divider
								li.dropdown-header Nav header
								li
									a(href='#') Separated link
								li
									a(href='#') One more separated link

		.page-header
			h1 Alerts
		+alert-success("<strong>Well done!</strong> You successfully read this important alert message.")
		+alert-info("<strong>Heads up!</strong> This alert needs your attention, but it's not super important.")
		+alert-warning("<strong>Warning!</strong> Best check yo self, you're not looking too good.")
		+alert-danger("<strong>Oh snap!</strong> Change a few things up and try submitting again.")
		.page-header
			h1 Progress bars
		+progress-bar(60)
		+progress-bar-info(20)
		+progress-bar-warning(60)
		+progress-bar-danger(80)
		+progress-bar-striped(60)
		.progress
			.progress-bar.progress-bar-success(style='width: 35%')
				span.sr-only 35% Complete (success)
			.progress-bar.progress-bar-warning(style='width: 20%')
				span.sr-only 20% Complete (warning)
			.progress-bar.progress-bar-danger(style='width: 10%')
				span.sr-only 10% Complete (danger)
		.page-header
			h1 List groups
		.row
			.col-sm-4
				ul.list-group
					li.list-group-item Cras justo odio
					li.list-group-item Dapibus ac facilisis in
					li.list-group-item Morbi leo risus
					li.list-group-item Porta ac consectetur ac
					li.list-group-item Vestibulum at eros
			// /.col-sm-4
			.col-sm-4
				.list-group
					a.list-group-item.active(href='#')
						| Cras justo odio
					a.list-group-item(href='#') Dapibus ac facilisis in
					a.list-group-item(href='#') Morbi leo risus
					a.list-group-item(href='#') Porta ac consectetur ac
					a.list-group-item(href='#') Vestibulum at eros
			// /.col-sm-4
			.col-sm-4
				.list-group
					a.list-group-item.active(href='#')
						h4.list-group-item-heading List group item heading
						p.list-group-item-text
							| Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
					a.list-group-item(href='#')
						h4.list-group-item-heading List group item heading
						p.list-group-item-text
							| Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
					a.list-group-item(href='#')
						h4.list-group-item-heading List group item heading
						p.list-group-item-text
							| Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
		// /.col-sm-4
		.page-header
			h1 Panels
		.row
			.col-sm-4
				+panel-default("Panel title")
					| Panel content
				+panel-primary("Panel title")
					| Panel content
			.col-sm-4
				+panel-success("Panel title")
					| Panel content
				+panel-info("Panel title")
					| Panel content
			.col-sm-4
				+panel-warning("Panel title")
					| Panel content
				+panel-danger("Panel title")
					| Panel content
		.page-header
			h1 Wells
		.well
			p
				| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.
		.page-header
			h1 Carousel
		+carousel("example-generic",[{image:'../images/carousel/slide1.jpg'},{image:'../images/carousel/slide2.jpg'},{image:'../images/carousel/slide3.jpg',}])
